
<%@ page contentType="text/html;charset=UTF-8" language="java" %><!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Demo</title>
    <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
    <link href="//unpkg.com/layui@2.8.7/dist/css/layui.css" rel="stylesheet">
</head>
<body>
<form class="layui-form layui-row layui-col-space16" id="fm" action="#">
    <div class="layui-col-md4">
        <div class="layui-input-wrap">
            <div class="layui-input-prefix">
                <i class="layui-icon layui-icon-username"></i>
            </div>
            <input type="text" name="StaffName" value="" placeholder="姓名" class="layui-input" >
        </div>
    </div>
    <div class="layui-col-md4">
        <select name="staffEducationBackground" id="staffEducationBackground" lay-filter="department" style="width: 200px" class="layui-select">
            <option value="-1" style="color: white;">性别</option>
            <option value="1">男</option>
            <option value="0">女</option>
        </select>
    </div>
    <div class="layui-col-md4">
        <div class="layui-input-wrap">
            <div class="layui-input-prefix">
                <i class="layui-icon layui-icon-date"></i>
            </div>
            <select name="staffStatus" id="staffStatus" lay-filter="position" style="width: 200px" class="layui-select">
                <option value="-1">在职状态</option>
                <option value="0">在职</option>
                <option value="1">待离职</option>
                <option value="2">离职</option>
            </select>
        </div>
    </div>
    <div class="layui-col-md4">
        <div class="layui-input-wrap">

            <select name="staffType" id="staffType" lay-filter="position" style="width: 200px" class="layui-select">
                <option value="-1">工种</option>
                <option value="1">正式工</option>
                <option value="2">实习工</option>
            </select>
        </div>
    </div>
    <div class="layui-col-md4">
        <div class="layui-input-wrap">
            <select name="staffPosition" id="staffPosition" lay-filter="department" style="width: 200px" class="layui-select">
                <option value="-1" style="color: white;">职位</option>
                <option value="0">职员</option>
                <option value="1">组长</option>
                <option value="2">车间主任</option>
                <option value="3">厂长</option>
            </select>
        </div>
    </div>
    <div class="layui-col-md4">
        <div class="layui-input-wrap">
            <select name="staffDepartmentId" id="staffDepartmentId" >
                <option value="-1" style="color: white;">部门</option>
            </select>
        </div>
    </div>

</form>
<div class="layui-btn-container layui-col-xs12">
    <button onclick="whereName()" class="layui-btn" >搜索</button>
</div>
<table class="layui-hide" id="ID-table-demo-data"></table>

<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
<script src="//unpkg.com/layui@2.8.7/dist/layui.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
   function tables() {
       layui.use(function(){
           var table = layui.table;
           var form = layui.form;
           var laydate = layui.laydate;
           // 创建表格实例
           table.render({
               elem: '#ID-table-demo-data',
               url: '${pageContext.request.contextPath}/staff/queryAll', // 此处为静态模拟数据，实际使用时需换成真实接口
               page: true, // 开启分页
               limit: 5,
               limits: [5,10,15],
               height: 'full-35',
               lineStyle: 'height: 80px;', // 定义表格的多行样式
               cols: [[

                   {field: 'staffImg', width: 120, title: '头像', templet:function(d){
                           if(d.staffImg != null)
                               return "<img id='img' src='" + d.staffImg + "' width='70px' style='height='70px'' >";
                       }},
                   {field: 'staffName', title: '用户名', width: 80},
                   {field: 'staffAge', title: '年龄', width: 80, sort: true},
                   {field: 'staffSex', title: '性别', width: 80},
                   {field: 'staffIdentityCard', title: '身份证', width: 150},
                   {field: 'staffPhone', title: '手机号', width: 110},
                   {field: 'staffType', title: '工种', width: 80},
                   {field: 'staffEntryTime', title: '入职时间', width: 110},
                   {field: 'staffResignationTime', title: '离职时间', width: 110},
                   {field: 'staffDepartment', title: '部门', width: 110},
                   {field: 'staffPosition', title: '职位', width: 110},
                   {field: 'staffEducationBackground', title: '学历', width: 80},
                   {field: 'staffBankCard', title: '工商银行卡号', width: 130},
                   {field: 'staffStatus', title: '在职状态', width: 100},
                   { fixed: 'right', title: '操作', width: 160, align: 'center', toolbar: '#templet-demo-theads-tool' }
               ]],
               page: true,
               height: 500
           });
       });
   }
</script>
<script>
    tables()
    selectStaffDepartment()
    function selectStaffDepartment(){
        $.ajax({
            "url": "${pageContext.request.contextPath}/staff/selectStaffDepartment",
            "type": "post",
            "data": {} ,
            "dataType": "json",
            "success": function(result) {
                let temp=""
                for (let i in result){
                    temp+=`
                    <option value="\${result[i].id}">\${result[i].staffDepartment}</option>
                    `
                }
                $('#staffDepartmentId').append(temp)
            },
            "error": function() {
                layer.alert("网络正忙")
            }
        });
    }
</script>
<script>
    updateStaffResignationTime()
    function updateStaffResignationTime() {
        var table = layui.table;
        $.ajax({
            "url": "${pageContext.request.contextPath}/staff/updateStaffResignationTime",
            "type": "post",
            "data":  {},
            "dataType": "json",
            "contentType":"application/json;charset=utf-8",
            "success": function(result) {
            }
        });
    }
</script>
<script>
    layui.use(['table', 'form', 'laydate'], function() {
        var table = layui.table;
        // Event listener for the table tool
        table.on('tool(ID-table-demo-data)', function(obj){
            if(obj.event === 'dimission'){
                layer.confirm('真的要离职吗?', function(index){
                    $.ajax({
                        "url"            :  "${pageContext.request.contextPath}/staff/dimissionController",
                        "type"         :  "post",
                        "data"         :  JSON.stringify({ "id": obj.data.staffId }),
                        "dataType" :  "json",
                        "contentType":"application/json;charset=utf-8",
                        "success"  :  function(result) {
                            if(result.code==200){
                                layer.alert(result.msg)
                                table.reload("ID-table-demo-data");
                            }else if(result.code==400){
                                layer.alert(result.msg)
                            }else {
                                layer.alert("网络正忙")
                            }
                        },
                        "error"       :  function() {
                            alert("出错了")
                        }
                    });
                    layer.close(index);
                });
            } else if(obj.event === 'edit'){
                window.location.href="toUpdatestaff?id="+obj.data.staffId
            }
        });
    });
</script>
<script type="text/html" id="templet-demo-theads-tool">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-primary layui-btn-xs" lay-event="dimission">离职</button>
        <button class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</button>
    </div>
</script>

<script>
    function whereName() {
        var name = $("#StaffName").val();
        if (name==null || name==""){
            tables()
        }else{
            layui.use(function(){
                var table = layui.table;
                var form = layui.form;
                var laydate = layui.laydate;
                var data= {
                    name:name
                }
                // 创建表格实例
                table.render({
                    elem: '#ID-table-demo-data',
                    url: '${pageContext.request.contextPath}/staff/queryStaffPunchCardViewWhere', // 此处为静态模拟数据，实际使用时需换成真实接口
                    page: true, // 开启分页
                    data: data,
                    limit: 5,
                    limits: [5,10,15],
                    height: 'full-35',
                    lineStyle: 'height: 80px;', // 定义表格的多行样式
                    cols: [[
                        {field: 'id' , title: 'ID', width: 80,},
                        {field: 'staffImg', width: 120, title: '头像', templet:function(d){
                                if(d.staffImg != null)
                                    return "<img id='img' src='" + d.staffImg + "' width='70px' style='height='70px'' >";
                            }},
                        {field: 'staffName', title: '用户名', width: 160},
                        {field: 'staffSex', title: '性别', width: 80},
                        {field: 'staffType', title: '工种', width: 80},
                        {field: 'staffClockIn', title: '上班时间', width: 160},
                        {field: 'staffClockOut', title: '下班时间', width: 160},
                        {field: 'staffYearToDate', title: '日期', width: 160},
                        {field: 'staffPosition', title: '职位', width: 160},
                        {field: 'staffDepartment', title: '部门', width: 80},
                        {field: 'workingHours', title: '小时数', width: 80},
                        {field: 'staffNumberOfCases', title: '计件数', width: 80},
                        { fixed: 'right', title: '操作', width: 160, align: 'center', toolbar: '#templet-demo-theads-tool' }
                    ]],
                    page: true,
                    height: 500
                });
                table.on('tool(ID-table-demo-data)', function(obj){
                    if(obj.event === 'dimission'){
                        var layer = layui.layer;
                        var util = layui.util;
                        layer.prompt({title: '密令输入框', formType: 1}, function(pass, index){
                            if(pass=="123"){
                                layer.prompt({title: '产量', formType: 3}, function(text, index){
                                    if(text==""||text==null){
                                        layer.msg('不能为空', {icon: 0});
                                    }else {
                                        let id = obj.data.staffId;
                                        let staffNumberOfCases = text;
                                        let data = {
                                            id: id,
                                            staffNumberOfCases: staffNumberOfCases};
                                        $.ajax({
                                            "url"         :  "${pageContext.request.contextPath}/staff/updateByThePieceController",
                                            "type"        :  "post",
                                            "data"        :  data, // 不再需要JSON.stringify()
                                            "dataType"    :  "json",
                                            "success"     :  function(result) {
                                                if(result.code==200){
                                                    var table = layui.table;
                                                    layer.alert(result.msg)
                                                    layer.alert(result.msg, function(){
                                                        layer.closeAll();
                                                    });
                                                    table.reload("ID-table-demo-data");

                                                }else if(result.code==400){
                                                    layer.alert(result.msg)
                                                }else {
                                                    layer.alert("网络正忙")
                                                }
                                            },
                                            "error"       :  function() {
                                                alert("出错了")
                                            }
                                        });
                                    }
                                });
                            }else{
                                layer.msg('密码无效！', {icon: 0});
                            }
                        });
                    } else if(obj.event === 'edit'){

                        var layer = layui.layer;
                        var util = layui.util;
                        layer.prompt({title: '密令输入框', formType: 1}, function(pass, index){
                            if(pass=="123"){
                                let id = obj.data.id;
                                layer.open({
                                    type: 1,
                                    area: ['420px', '320px'], // 宽高
                                    content: '<div style="padding: 20px;"><label for="startTime">上班时间：</label><input type="text" id="startTime" placeholder="上班时间" readonly class="layui-input"><br><br><label for="endTime">下班时间：</label><input type="text" id="endTime" readonly placeholder="下班时间" class="layui-input"><br><br><div style="text-align: center;"><button class="layui-btn layui-btn-primary" onclick="up('+id+')" id="saveBtn">保存</button>&nbsp;<button class="layui-btn layui-btn-primary" onclick="closeEditModal()"  id="cancelBtn" >取消</button></div></div>',
                                    success: function() {
                                        layui.use('laydate', function() {
                                            var laydate = layui.laydate;
                                            laydate.render({
                                                elem: '#startTime',
                                                type: 'time'
                                            });
                                            laydate.render({
                                                elem: '#endTime',
                                                type: 'time'
                                            });
                                        });
                                    }
                                });
                            }else{
                                layer.msg('密码无效！', {icon: 0});
                            }
                        });



                    }
                });


            });
        }
    }
</script>
</body>
</html>